<template>
  <div class="home">
    <nav-header @add="add"></nav-header>
    <nav-main :list="list"></nav-main>
    <nav-footer :list="list" @clear="clear"></nav-footer>
  </div>
</template>

<script>
import NavHeader from '@/components/navHeader/NavHeader'
import NavMain from '@/components/navMain/NavMain'
import NavFooter from '@/components/navFooter/NavFooter'
import {defineComponent, ref, computed,} from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name:'Home',//组件名称
  //接收父组件点数据
  props:{
  },
  //定义子组件
  components:{
    NavHeader,
    NavMain,
    NavFooter
  },
  setup(props,ctx){
	  let store = useStore()
	 let list = computed(()=>{
		 return store.state.list
	 })
	//  添加任务
	 let add = (val) =>{
		//  console.log(val);
		let flag =true
		list.value.forEach((item)=>{
			if(item.title === val){
				flag = false
				alert('任务已存在')
			}
		})
		if(flag){
			store.commit('addTodo',{
			title:val,
			complete:false
			})
		}
	 }
	 //删除任务
	 let del = (val) =>{
		console.log(val);
		// 调用删除mutation
		// store.commit('delTodo',val)
	}
	// 清除已完成
	let clear = (val) =>{
		store.commit('clear',val)
	}
    return{
		list,
		add,
		del,
		clear
    }
  }
})
</script>
<style scoped lang="scss">
	.home{
		background-color:beige;
		width: 240px;
		margin: 20px auto;
		padding: 10px;
	}
</style>